<template>
  <el-container>
    <!-- 标题栏 -->
    <el-header :style="obj">
      <div>
        <img src alt />
        <router-link :to="'/home'" style="color:rgb(202, 214, 157)">
        <span id="header-title">COCO视频</span>
        </router-link>
      </div>
      <el-input placeholder="用户名称" clearable v-model="queryInfo.query.keyWord" @clear="search()">
        <el-button id="btn1" slot="append" icon="el-icon-search" @click="search()"></el-button>
      </el-input>
      <div>
        <i class="el-icon-upload" @click="showUpload()" style="cursor:pointer"></i>
        <el-dropdown style="color:rgb(202, 214, 157)">
          <span>
            <i class="el-icon-stopwatch" style="cursor:pointer"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="width:300px;height:350px">
            <el-scrollbar style="height: 100%;">
              <el-dropdown-item divided v-for="o in historyList" :key="o.id" width="100px">
                <router-link :to="'/video/' + o.videoId">
                  <el-row>
                    <el-col :span="8">
                      <span>{{o.videoName}}</span>
                    </el-col>
                    <el-col :span="16">
                      <span>{{o.hisTime}}</span>
                    </el-col>
                  </el-row>
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item
                style="float:right"
                :style="{'display': (historyList.length<=0 ? 'none':'block')}"
              >
                <el-button type="danger" round @click="deleteHistory()" size="small">删除记录</el-button>
              </el-dropdown-item>
            </el-scrollbar>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown style="color:rgb(202, 214, 157)">
          <span>
            <i class="el-icon-user" style="cursor:pointer"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item divided @click.native="showInfo()">用户信息</el-dropdown-item>
            <el-dropdown-item divided @click.native="showCollection()">收藏列表</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout()">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 上传弹窗 -->
    <add-or-update v-if="showUpVisible" ref="addOrUpdate"></add-or-update>
    <el-main>
      <div id="allbody">
        <el-row>
          <el-col :span="6" v-for="o in videoList" :key="o.id" :style="{padding: '16px'}">
            <router-link :to="'/video/' + o.id">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="o.imageId" width="100% " height="200px" />
                <div id="video-name">
                  <span>{{o.videoName}}</span>
                </div>
              </el-card>
            </router-link>
          </el-col>
        </el-row>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageIndex"
          :page-sizes="[5, 10, 12]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import AddOrUpdate from "./Dialog";
import Conversion from "../assets/js/conversion";
export default {
  components: {
    AddOrUpdate
  },
  data() {
    return {
      queryInfo: {
        query: {
          keyWord: "",
          typeId: [],
          times: []
        },
        pageIndex: 1,
        pageSize: 12
      },
      obj: {
        position: "static"
      },
      showUpVisible: false,
      //历史记录
      historyList: [],
      total: 0,
      videoList: []
    };
  },
  watch:{
    $route() {
			this.queryInfo.query = JSON.parse(this.$route.query.keyWord); //获取传来的参数 
      this.getVideoByQuery();
		}
  },
  mounted() {
    window.addEventListener("scroll", this.showIcon);
    var that = this;
    Conversion.$on("V_refresh", function() {
      that.getVideoForYou();
    });
  },
  created() {
    this.queryInfo.query = JSON.parse(this.$route.query.keyWord);
    console.log(this.queryInfo.query)
    this.getVideoByQuery();
    this.getHistoryList();
  },
  methods: {
    async getVideoByQuery() {
      await this.$http
        .post("/portal/facade/getVideoByCondition", this.queryInfo)
        .then(resp => {
          if (resp.status !== 200) return this.$message.error("获取数据失败！");
          console.log(resp)
          this.videoList = resp.data.data;
          this.total = resp.data.total
        })
        .catch(() => {
          this.$message.error("获取异常！");
        });
    },
    //获取历史记录
    async getHistoryList() {
      await this.$http
        .get("/portal/common/getTodeyHistory")
        .then(resp => {
          if (resp.status !== 200) return this.$message.error("获取数据失败！");
          this.historyList = resp.data;
          console.log(this.historyList);
        })
        .catch(() => {
          this.$message.error("获取异常！");
        });
    },
    //删除历史记录
    async deleteHistory() {
      await this.$http
        .delete("/portal/common/deleteHistory")
        .then(resp => {
          if (resp.status !== 200) return this.$message.error("获取数据失败！");
          this.getHistoryList();
        })
        .catch(() => {
          this.$message.error("获取异常！");
        });
    },
    //视频搜索
    search(){
      //不走路由查询
      // var jsonString = JSON.stringify(this.queryInfo.query)
      // this.$router.push({
      //   path:'/search',query:{keyWord:jsonString}
      // })
      this.getVideoByQuery();
    },
    //退出
    async logout() {
      this.setLoadStatus("logOut")
      window.sessionStorage.clear();
      this.$router.push("/login"); 
    },
    //设置登录状态
    async setLoadStatus(userId){
      await this.$http.put(`manager/user/updateStatus/${userId}/${'0'}`).then(resp=>{
        if(resp.status !== 200) return this.$message.error("更新失败！")
      })
    },
    showUpload() {
      this.showUpVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init();
      });
    },
    showCollection() {
      this.showUpVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.initCollection();
      });
    },
    showInfo(){
      this.showUpVisible = true
      this.$nextTick(()=>{
        this.$refs.addOrUpdate.initInfo();
      })
    },
    showIcon() {
      if (
        !!document.documentElement.scrollTop &&
        document.documentElement.scrollTop > 500
      ) {
        this.obj.position = "fixed";
      } else {
        this.obj.position = "static";
      }
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pageSize = newSize;
      this.getVideoByQuery();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pageIndex = newPage;
      this.getVideoByQuery();
    },
  }
};
</script>

<style lang="less" scoped>
#allbody {
  margin: auto;
  width: 80%;
  background-color: black;
}
.home-container {
  height: 100%;
}
.el-header {
  background-color: #232325;
  display: flex;
  width: 100%;
  position: static;
  z-index: 999;
  justify-content: space-between;
  padding-left: 3%;
  padding-right: 3%;
  align-items: center;
  color: rgb(202, 214, 157);
  font-style: italic;
  font-size: 25px;
  font-family: "微软雅黑";
  > div {
    i {
      margin-left: 30px;
      font-size: 30px;
    }
  }
  > .el-input {
    width: 30%;
  }
}
.el-main {
  margin: 0;
  padding: 0;
}
#allbody {
  margin: auto;
  width: 76%;
  height: 650px;
  background-color: rgb(249, 249, 249);
}
</style>